/*   
Theme Name: Shippuden
Theme URI: http://marocwebawards.com
Description: Maroc Web Awards - L'événement qui récompense le meilleur du web marocain.
Author: Fahd Idaghdour
Author URI: http://synergie-media.com
Version: 8.2
*/


@import url(//fonts.googleapis.com/css?family=Dosis:400,500);
@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);

/* ==========================================================================
   Reset
   ========================================================================== */

* { 
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

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

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block; 
  vertical-align: baseline; 
}

[hidden],
template {
  display: none;
}

a {
  background: transparent;
  text-decoration: none;
  transition: all 200ms ease-out;
  color: #C2A40F;
}

a:active,
a:hover {
  color: #1a1d25;
  outline: 0;  
  transition: all 200ms ease-out;
}

ul {list-style: none;}
abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

img {
  border: 0;
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"], 
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; 
  cursor: pointer; 
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; 
  padding: 0; 
}

textarea {
  overflow: auto;
}

textarea, input { outline: none; }

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

p { margin-bottom: 10px;}

/* ==========================================================================
   General
   ========================================================================== */
html { background: #1a1d25;}
body {
  height: 100%;
	font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif ;
	 font-style: normal;
	 background: #FFF;
	 cursor: auto;
	 line-height: 1.5;
   font-size: 14px;
	 color: #454545;
}
.row {
	  width: 100%;
	  margin: 0 auto;
    max-width: 1200px;
    padding: 0 10px;
}

.main, .content {
   font-family: "Dosis", "Helvetica Neue", "Helvetica", Arial, sans-serif;
   overflow: hidden;
   background: #fff;
   padding: 20px 0;
   width: 100%;
}
h2 { margin-bottom: 40px; font-weight: 500; color: #000;}
.remodal h2 { font-size: 30px; margin-bottom: 25px;}
.remodal p { color: #666; font-size: 14px}

/* ==========================================================================
   Utilities
   ========================================================================== */
.left { float: left !important;}
.right { float: right !important;}
.clearfix {}
.hide { display: none;}
.text-left { text-align: left;}
.text-right { text-align: right;}
.text-center { text-align: center;}
.text-justify {text-align: justify;}
.radius { border-radius: 3px; }
.radius-5 { border-radius: 5px; }
.round { border-radius: 50%;}
small { font-size: 90%; }
ul.inline li { display: inline-block;}

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; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.ar {font-family: 'Droid Arabic Kufi', serif !important;}
.btn {
  display: inline-block;
  padding: 7px 15px;
  background: #C2A40F;
  border: solid 1px #8b760e;
  color: #fff !important;
  line-height: 1;
  text-align: center;
}
 .btn.fb { 
   background: #3b5998;
   border-color: #28437a;
 }
.btn.tw { 
   background: #55acee;
   border-color: #428ac0;
 }

.btn.clear { 
  background: transparent;
  color: #C2A40F !important;
  font-size: 20px;
  padding: 10px 20px;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.btn.clear:hover { 
  color: #FFF !important;
  opacity: inherit;
  border-color: #fff;
  padding: 10px 30px;
}

.btn.live {
  background: #C2A40F !important;
  color: #fff !important;
  border: none;
  letter-spacing: 1px;
}

.btn:hover { opacity: .8;}
.btn.expand { width: 100%; margin-bottom: 10px; }
.btn.large { padding: 14px 20px; text-transform: uppercase; letter-spacing: 1px; font-weight: 500;}

a.white { color: #FFF;}
a.white:hover { color:#C2A40F;}
.upper { text-transform: uppercase;}

section.p40 { padding-top: 40px; padding-bottom: 40px;}

.twitter-tweet { margin: 10px auto !important;}


/* ==========================================================================
   Header
   ========================================================================== */
.header {
  font-family: "Dosis", "Helvetica Neue", "Helvetica", Arial, sans-serif;
   background: #1a1d25 url('img/lp-bg.jpg') center center no-repeat;
   overflow: hidden;
   height: 445px !important;
   padding-bottom: 30px;
}

.header nav, .header .counter, .header .logo, .gold, .main { position: relative; z-index: 2;}

.header nav, .single-header nav { 
  background:#191c23; 
  overflow: hidden; 
  width: 100%; 
  padding: 12px;
  text-transform: uppercase
}
.header nav li, .single-header nav li { 
  display: inline-block;
  margin: 0 15px;
}

nav .upper { letter-spacing: 1px;}

.header nav a:hover, .single-header nav a:hover { color: #fff;}

.single-header { 
  font-family: "Dosis", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  background: #1a1d25 url('img/lp-bg.jpg') center center no-repeat;
  padding-bottom: 20px;
  position: relative;
  z-index: 3;
}

.single-header:after {
    content: "";
    height: 4px;
    width: 30px;
    background-color: #C2A40F;
    display: inline-block;
    position: absolute;
    bottom: -2px;
    left: 50%;
    margin-left: -15px;
  }

.single-header .counter {
  margin-top: 35px;
}

.logo {
   width: 220px;
   display: block;
   margin: 30px auto 30px auto;
}
.logo img { width: 100%;}
.counter { 
   width: 100%;
   text-align: center;
}
.header p { 
   margin-bottom: 5px;
}
.countdown { 
  color: #aaa;
  margin-top: 10px;
}

#demo-canvas { position: absolute; z-index: 1; width: 100%; opacity: .5;}

.gold { 
  font-family: "Dosis", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  min-height: 100px;
  background: #C3A80F url('img/g-bg.jpg') center center no-repeat;
  background-size: cover;
  padding: 20px 10px;
  overflow: hidden;
}

.gold .row { max-width: 1000px;}
.gold .vid-widget { max-width: 770px !important;}
.vid-widget { 
  float: left;
  position: relative;
  display: inline-table;
  width: 100%;
  color: #fff ;
}

.vid-widget:hover { color: #fff;}
.vid-widget:hover img { margin-right: 20px; transition: all 200ms ease-out;}

.vid-widget img {
  position: relative;
  display: block;
  height: 60px;
  width: 96px;
  border-radius: 3px;
  float: left;
  margin-right: 15px;
  transition: all 200ms ease-out;
}
.vid-widget::after { 
 content: "";
 position: absolute;
 top: 20px; left: 37px;
 background: url('http://marocwebawards.com/wp-content/themes/shippuden/img/play.png') center center no-repeat;
 width: 24px; height: 24px;
 opacity: .6;
}

.vid-widget:hover::after { opacity: .8;}
.vid-widget p { font-size: 20px;}
.vid-widget span { 
  font-weight: 500;
  display: block;
  color: #353a47;
  font-size: 14px;

}

.vid-widget.article::after { display: none;}
.gold .more-vid {
  display: block; float: right;
  color: #fff;
  font-weight: 500;
  margin-top: 20px;
  letter-spacing: 0.05rem;
}
.gold .more-vid:hover {
  color: #1a1d25;
}

/* ==========================================================================
   Equipe
   ========================================================================== */

.equipe ul { width: 100%; text-align: center; padding-top: 30px; letter-spacing: 1px;}
.equipe li { display: inline-block; width: 200px; margin: 0 15px 60px 15px; font-size: 18px; font-weight: 500;}
.equipe li img { display: block; border-radius: 50%; max-width: 160px; margin: 0 auto 30px auto; }
.equipe p { font-size: 18px; text-align: center; margin-bottom: 30px;}

/* ==========================================================================
   Main
   ========================================================================== */
 .gray { background: #f6f6f6; overflow: hidden;} 
 .section-title {
   color: #C2A40F;
   text-align: center;
   text-transform: uppercase;
   position: relative;
   padding-bottom: 15px; 
   letter-spacing: 1px;
 }

 .sub-title {
   text-transform: uppercase;
   display: block;
   text-align: center;
   margin: 60px 0 20px 0;
   color: #999;
 }

 h1.h1 { 
  font-weight: 400;
  text-align: center;
  font-size: 19px;
  color: #666;
  line-height: 36px;
 }

 .section-title:before {
    content: "";
    height: 1px;
    width: 270px;
    background-color: #ddd;
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -135px;
  }

  .section-title:after {
    content: "";
    height: 4px;
    width: 30px;
    background-color: #C2A40F;
    display: inline-block;
    position: absolute;
    bottom: -1px;
    left: 50%;
    margin-left: -15px;
  }
.sponsors { margin: 40px 0 30px 0; font-family: "Dosis", "Helvetica Neue", "Helvetica", Arial, sans-serif !important; }
  .sponsors li {
    font-size: 14px !important; text-transform: uppercase;
    display: inline-table;
    vertical-align: middle;
    width: 224px;
  }

  .sponsors .inwi { width: 520px; padding: 0 60px 0 0;}

  .sponsors li img { width: 100%;}
  
  .mwa-spirit { width: 100%;}

  .sponsors hr { max-width: 400px; margin: 30px auto 10px auto; margin-bottom: 40px; border: 0; border-bottom: 1px solid #C2A40F; position: relative; clear: both; opacity: .3;}
  .sponsors hr:after {
    content: "";
    height: 3px;
    width: 30px;
    background-color: #666;
    display: inline-block;
    position: absolute;
    bottom: -2px;
    left: 50%;
    margin-left: -15px;
  }

.partners { margin: 0 auto !important; }


/* ==========================================================================
   Timeline 
   ========================================================================== */

.timeline { max-width: 700px; margin: 0 auto; overflow: hidden;}
.timeline-start { text-align: center; margin: 20px auto 80px auto; border-radius: 5px; background: #1a1d25; color: #fff; font-weight: 500; padding: 7px; width: 300px; position: relative;}
.timeline-start::after { 
  content: "";
  position: absolute;
  bottom: -10px;
  left: 47%;
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #1a1d25;}

.timeline-end { clear: both; text-align: center; margin: 0 auto; border-radius: 5px; background: #C2A40F; color: #fff; font-weight: 500; padding: 7px; width: 300px; position: relative;}
.timeline-end::after { 
  content: "";
  position: absolute;
  top: -10px;
  left: 47%;
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #C2A40F;}

.date-soiree { display: block; clear: both; margin-bottom: 20px; text-align: center; font-size: 22px; font-weight: 500; color: #C2A40F;}
.date-start, .date-end { color: #999;}
.etape1 { height: 60px; border-left: 4px solid #2790ae; width: 50%; float: right; clear: both; margin-bottom: 80px; position: relative;}
.etape1::before { content: ""; width:4px; height: 4px; border-radius: 50%; border: 4px solid #2790ae; position: absolute; top: -8px; left: -8px}
.etape1::after { content: ""; width:4px; height: 4px; border-radius: 50%; border: 4px solid  #2790ae; position: absolute; bottom: -8px; left: -8px}
.etape1 .date-start { position: absolute; left: -200px; top: -10px; font-size: 16px;}
.etape1 .date-end { position: absolute; left: -200px; bottom: -10px; font-size: 16px;}
.etape1 h4 { position: absolute; top: 12px; left: 50px; font-size: 22px; font-weight: 500; color: #2790ae; }

.etape2 { height: 60px; border-right: 4px solid #f94600; width: 50.5%; float: left; clear: both; margin-bottom: 80px; position: relative;}
.etape2::before { content: ""; width:4px; height: 4px; border-radius: 50%; border: 4px solid  #f94600; position: absolute; top: -8px; right: -8px}
.etape2::after { content: ""; width:4px; height: 4px; border-radius: 50%; border: 4px solid  #f94600; position: absolute; bottom: -8px; right: -8px}
.etape2 .date-start { position: absolute; right: -200px; top: -10px; font-size: 16px;}
.etape2 .date-end { position: absolute; right: -200px; bottom: -10px; font-size: 16px;}
.etape2 h4 { position: absolute; top: 12px; right: 50px; font-size: 22px; font-weight: 500; color: #f94600; }

.etape3 { height: 60px; border-left: 4px solid #41ba93; width: 50%; float: right; clear: both; margin-bottom: 80px; position: relative;}
.etape3::before { content: ""; width:4px; height: 4px; border-radius: 50%; border: 4px solid  #41ba93; position: absolute; top: -8px; left: -8px}
.etape3::after { content: ""; width:4px; height: 4px; border-radius: 50%; border: 4px solid  #41ba93; position: absolute; bottom: -8px; left: -8px}
.etape3 .date-start { position: absolute; left: -200px; top: -10px; font-size: 16px;}
.etape3 .date-end { position: absolute; left: -200px; bottom: -10px; font-size: 16px;}
.etape3 h4 { position: absolute; top: 12px; left: 50px; font-size: 22px; font-weight: 500; color: #41ba93; }

/* ==========================================================================
   Categories
   ========================================================================== */

.cat-list {text-align: center;}

.cat {
   position: relative;
   width: 210px;
   height: 160px;
   background: #fcfcfc;
   display: inline-block;
   overflow: hidden;
   margin: 8px;
   text-align: center;
   padding: 10px;
   border-radius: 3px;
  transition: all 300ms ease-out;
  color: #C2A40F;
}
.cat img { width: 60px; display: block; margin: 15px auto 10px auto; opacity: 0.8;}
.cat-list .btn {
  margin-top: 40px;
  font-weight: 400;
}
.cat-list p { font-size: 18px; margin-bottom: 40px; line-height: 32px; color: #;}


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

.content { font-family: Georgia,Cambria,"Times New Roman",Times,serif; font-size: 19px; line-height: 38px;}
.post-head { margin-bottom: 30px;}
.post-head .post-title {text-align: center;margin : 10px 0 ;font-size: 26px;}
span.date { font-size: 14px; display: block; text-align: center; color: #999; font-family: "Dosis", "Helvetica Neue", "Helvetica", Arial, sans-serif !important;}
.content .wide-img { margin-bottom: 30px; width: 100% !important;}
.content p { font-size: 19px; line-height: 38px; margin-bottom: 40px; }
.content p a {text-decoration: underline;}
.content p.sous-titre { width: 100%; font-size: 19px; 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;}
aside.top-60 { top: 60px !important;}

.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { color: #000; font-weight: bold; font-family: "Dosis", "Helvetica Neue", "Helvetica", Arial, sans-serif !important; }
.content h2 { font-size: 36px; margin-bottom: 30px;}
.content h3 { font-size: 30px; margin-bottom: 20px;}
.content h4 { font-size: 26px; margin-bottom: 16px;}
.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; font-size: 18px;  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;
  }


  blockquote { 
    font-size: 22px; 
    margin-left: 40px;
    text-align: left; 
    line-height: 38px; 
    color: #999; 
    position: relative;
    margin-bottom: 30px
  }
  blockquote:before {
  color: #ccc;
  content: '\201C';
  font-size: 70px;
  position: absolute;
  top: 10px;
  left: -40px;
}
  blockquote span { display: block; color: #C2A40F;font-size: 85%; }

  /* ==========================================================================
     Blog
     ========================================================================== */

.main.blog article { max-width: 700px; margin: 0 auto 40px auto; overflow: hidden; }
.main.blog article a { display: block;}
.main.blog a h3 { color: #000; margin-top: 20px;}
.main.blog a:hover { opacity: .5;}
.main.blog h3 { margin-bottom: 15px;}
.main.blog .excerpt { font-size: 16px; margin: 20px auto; text-align: center; color: #666;}


.comments { max-width: 750px; margin: 20px auto;}
.comments h3 { font-size: 18px; }
.commentlist { font-size: 14px;}
.commentlist li { background: #fff; display: block; width: 100%; margin-bottom: 20px; border-bottom: 1px solid #eee;}
.comment-author { float: left; font-weight: bold; font-family: "Dosis", "Helvetica Neue", "Helvetica", Arial, sans-serif !important; font-weight: 400;}
.comment-meta{ float: right; font-weight: bold; font-family: "Dosis", "Helvetica Neue", "Helvetica", Arial, sans-serif !important; font-weight: 400;}
.comments p { display: block; clear: both; font-size: 13px; margin-bottom: 10px; padding-left: 10px;}
.comments .reply { display: none;}
.comments textarea, .comments input { border: 1px solid #ccc; border-radius: 3px;}

.comments input { height: 30px;}
.comments #submit {
  display: inline-block;
  padding: 7px 15px;
  background: #C2A40F;
  border: solid 1px #8b760e;
  color: #fff !important;
  line-height: 1;
  text-align: center;
}

.comments #submit:hover { opacity: .5;}

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

/* ==========================================================================
   footer
   ========================================================================== */
.footer {
  overflow: hidden;
  font-family: "Dosis", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  background: #1a1d25 url('img/lp-bg.jpg') center center no-repeat;
  padding: 40px 0 0 0;
}
.f-bottom {
  letter-spacing: 1px;
  margin-top: 20px;
  float: left; width: 100%;
  background:#191c23;
  padding: 15px 0 5px 0;
  color: #ccc;
}
.f-bottom a.right { margin-left: 10px;}
.f-bottom a:hover {color: #aaa;}



/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { background: #f6f6f6;}
.accordion-toggle {cursor: pointer;}
.accordion-content {display: none; margin-top: 10px; font-size: 19px; color: #777; padding: 0px 20px 10px 20px;}
.accordion-content.default {display: block;}
.acc-item h4 { font-size: 22px; font-weight: 500; padding: 10px 20px}
.acc-item { background: #fff; max-width: 950px; overflow: hidden; display: block; margin: 20px auto; border-radius: 2px; border-left: 5px solid #C2A40F;
  -webkit-box-shadow: 3px 2px 6px 0px rgba(64,64,64,.1);
-moz-box-shadow: 3px 2px 6px 0px rgba(64,64,64,.1);
box-shadow: 3px 2px 6px 0px rgba(64,64,64,.1);}



/* ==========================================================================
   Blog archive
   ========================================================================== */


.blog-archive article { 
  letter-spacing: 0.05rem;
  position: relative;
  background: #fff; 
  max-width: 950px; 
  overflow: hidden; 
  display: block; 
  margin: 20px auto 30px auto; 
  border-radius: 2px; 
  border-left: 5px solid #C2A40F;
  padding-right: 100px;
  -webkit-box-shadow: 3px 2px 6px 0px rgba(64,64,64,.1);
-moz-box-shadow: 3px 2px 6px 0px rgba(64,64,64,.1);
box-shadow: 3px 2px 6px 0px rgba(64,64,64,.1);
}

.blog-archive a { display: block; max-width: 950px; margin: 0 auto; color: #000;
}

.blog-archive a:hover article { border-left: 5px solid #1a1d25;}

.blog-archive article img {
  display: block; width: 90px; height: 60px; position: absolute; top: 0; right: 0;
}

.blog-archive article h3 { margin: 7px 0 10px 20px; font-weight: 500;}
.blog-archive span { display: block; font-size: 12px; color: #999; font-weight: 400;}


/* ==========================================================================
   Candidats & Vote
   ========================================================================== */

.mwa8-finalist {background: #C2A40F !important; border: none !important;}
.mwa8-finalist p { color: #fff !important;}

/* Vote widget
   ========================================================================== */

.vote-widget { 
  font-family: "Dosis", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  max-width: 900px;
  margin: 0 auto 30px auto;
  overflow: hidden;
}
.vote-widget .img-vote { margin-bottom: 15px; float: left; position: relative;}
.vote-widget .img-vote span { 
  position: absolute; 
  font-family: Georgia,Cambria,"Times New Roman",Times,serif;
  font-size: 14px;
  color: #fff;
  top: 10px; 
  left: 0px; 
  background: rgba(0,0,0,.7); 
  padding: 0 15px;
}

.vote-widget p {
  font-size: 18px;
  line-height: 28px;
  margin-bottom: 5px;
  color: #222;
  display: block;
  text-align: justify;
}
.content-vote { padding: 0 0 0 20px; width: 100%; max-width: 450px; float: right;}
.vote-widget .spans { margin-bottom: 10px; float: left; width: 100%;}
.vote-widget span.c-link { font-size: 16px; display: block; background: url('img/link.png') left center no-repeat; padding-left: 26px;}
.vote-widget span.par { font-size: 14px; display: block;}

.action-button { width: 100%; margin: 20px auto 0 auto; max-width: 450px;}
.action-button .btn.action { font-weight: 400;}

.vote-widget .action-button p {text-align: center !important;}
.action-button.partager { text-align: center;}
.action-button.partager hr { margin-bottom: 20px;}

.small-vote-widget.small-vote-widget { margin-left: 0;}
.small-vote-widget li {
  display: inline-table;
  width: 200px;
  padding: 5px;
  border: 1px solid #ddd;
  background: #f6f6f6;
  border-radius: 3px;
  margin: 0 10px 20px 10px;
  position: relative;
}
.small-vote-widget img {
  width: 100%;
  display: block;
}

.small-vote-widget a {
  overflow: hidden;
  display: block;
}

.small-vote-widget span {
  position: absolute;
  display: block;
  top: 10px;
  left: 5px;
  font-size: 14px;
  line-height: 20px;
  color: #fff; padding: 5px 10px;
  background: rgba(0,0,0,.7);
}

.small-vote-widget p {
  font-family: "Dosis", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  color: #222;
  font-size: 14px;
  font-weight: 500;
  margin: 7px 0 0 0;
  line-height: 20px;
}

.sortbyvote { 
  height: 24px;
  width: 25px;
  margin: -15px 0 25px 28px;
  opacity: .3;
 }

 .sortbyvote:hover { opacity: .8;}


/* Breadcrumbs
   ========================================================================== */

.breadcrumbs {
  font-family: "Dosis", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-size: 14px;
  margin-top: -10px;
}

.breadcrumbs span { margin: 0 3px;}

/* ==========================================================================
   404
   ========================================================================== */

.page-404 { 
  width: 100%; 
  height: 100%; 
  font-family: "Dosis", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  background: #1a1d25 url('img/lp-bg.jpg') center center no-repeat;
  background-size: cover;
  overflow: hidden;
  padding: 20px;
}

.page-404 img {display: block; margin: 130px auto 60px auto;}
.page-404 p { text-align: center; color: #fff; font-size: 16px; letter-spacing: 0.05rem;}
.page-404 a:hover { color: #eee;}
.page-404 .btn{border: none; margin-top: 30px;}


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

@media only screen and (max-width: 960px) {
  .vote-widget { max-width: 450px;}
  .content-vote { padding: 0px; }
}
@media only screen and (min-width: 450px) and (max-width: 750px) {

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

@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: -170px;}
.etape2 .date-end, .etape2 .date-start { right: -170px;}
}

@media only screen and (max-width: 750px) { 
.header { height: 570px !important;}
.gold { display: none;}
header nav .upper { width: 100%; text-align: center; margin-bottom: 20px;}
header nav ul {width: 100%; text-align: center;}
header nav ul li { margin-bottom: 20px !important;}

}

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

.sponsors .inwi { width: 100%; padding: 0 30px;}


}



/* ==========================================================================
   Remodal necessary styles
   ========================================================================== */

/* Hide scroll bar */

html.remodal_lock, body.remodal_lock {
    overflow: hidden;
}

/* Anti FOUC */

.remodal, [data-remodal-id] {
    visibility: hidden;
}

/* Overlay necessary styles */

.remodal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;

    display: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;

    text-align: center;
}

.remodal-overlay:after {
    display: inline-block;
    height: 100%;
    margin-left: -0.05em;

    content: '';
}

/* Fix iPad, iPhone glitches */

.remodal-overlay > * {
    -webkit-transform: translateZ(0px);
}

/* Modal dialog necessary styles */

.remodal {
    position: relative;

    display: inline-block;
}

/* ==========================================================================
   Remodal default theme
   ========================================================================== */


/* Background for effects */

.remodal-bg {
    -webkit-transition: -webkit-filter 0.2s linear;
    -moz-transition: -moz-filter 0.2s linear;
    -o-transition: -o-filter 0.2s linear;
    transition: filter 0.2s linear;
}

body.remodal_active .remodal-bg {
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
}

/* Overlay default theme styles */

.remodal-overlay {
    opacity: 0;
    background: rgba(33, 36, 46, 0.95);
    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
}

body.remodal_active .remodal-overlay {
    opacity: 1;
}

/* Modal dialog default theme styles */

.remodal {
    width: 100%;
    min-height: 100%;
    padding: 35px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    font-size: 16px;
    background: #f4f4f4;
    background-clip: padding-box;
    color: #182a3c;
    -webkit-box-shadow: 0px 0px 8px #171a24;
    box-shadow: 0px 0px 8px #171a24;
    -webkit-transform: scale(0.95);
    -moz-transform: scale(0.95);
    -ms-transform: scale(0.95);
    -o-transform: scale(0.95);
    transform: scale(0.95);
    -webkit-transition: -webkit-transform 0.2s linear;
    -moz-transition: -moz-transform 0.2s linear;
    -o-transition: -o-transform 0.2s linear;
    transition: transform 0.2s linear;
}

body.remodal_active .remodal {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

/* Modal dialog vertical align  */

.remodal, .remodal-overlay:after {
    vertical-align: middle;
}

/* Close button */

.remodal-close {
    position: absolute;
    top: 5px;
    left: 5px;

    width: 28px;
    height: 28px;

    text-decoration: none;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 2px solid #3e5368;
    -webkit-transition: background 0.2s linear;
    -moz-transition: background 0.2s linear;
    -o-transition: background 0.2s linear;
    transition: background 0.2s linear;
}

.remodal-close:after {
    display: block;

    font-size: 28px;
    font-family: Arial, 'Helvetica CY', 'Nimbus Sans L', sans-serif !important;
    content: "×";
    line-height: 28px;
    cursor: pointer;
    text-decoration: none;
    color: #3e5368;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.remodal-close:hover, .remodal-close:active {
    background: #3e5368;
}

.remodal-close:hover.remodal-close:after, .remodal-close:active.remodal-close:after {
    color: #f4f4f4;
}

/* Dialog buttons */

.remodal-confirm, .remodal-cancel {
    display: inline-block;
    width: 120px;
    padding: 9px 0;
    margin: 0 0 5px 0;

    font-size: 10pt;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    background-clip: padding-box;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.remodal-confirm {
    border: 2px solid #16a085;
    background: #f4f4f4;
    color: #16a085;
}

.remodal-confirm:hover, .remodal-confirm:active {
    background: #16a085;
    color: #f4f4f4;
}

.remodal-cancel {
    border: 2px solid #c0392b;
    background: #f4f4f4;
    color: #c0392b;
}

.remodal-cancel:hover, .remodal-cancel:active {
    background: #c0392b;
    color: #f4f4f4;
}

/* Media queries
   ========================================================================== */

@media only screen and (min-width: 40.063em) /* min-width 641px */ {
    .remodal {
        max-width: 700px;
        margin: 20px auto;
        min-height: 0;

        -webkit-border-radius: 6px;
        border-radius: 6px;
    }
}

/* IE8
   ========================================================================== */

html.lt-ie9,
html.lt-ie9 body{    
    min-height:100%;
    overflow: auto !important;
    margin: 0;
}


.lt-ie9 .remodal-overlay {
    background: url(http://marocwebawards.com/wp-content/themes/shippuden/img/overlay-ie8.png);
}

.lt-ie9 .remodal{
    width: 500px;
    min-height: auto;
}