/*
Theme Name:  Feed my food
Description: Template dédié à la restauration sur un modèle "one pager"
Version: 1.5
Author: Yvan Roumilhac
Author URI: yvan.roumi@gmail.com
Tags:template, html5, css3, jQuery, one pager, restauration

Identité graphique : Agence Margaret, Graphic design, Front end et développement : Yvan Roumilhac - Nantes pour l'utilisation exclusive du site emportez-moi.fr.
*/

/* =========================
   BASE
========================= */
body {
  font-family: "Gill Sans","Gill Sans MT","Myriad Pro","DejaVu Sans Condensed",Helvetica,Arial,"sans-serif";
  font-size:1em;
  color:#ffed00;
  background-color:#f0f0f0;
}

h1,h2,h3,h4,h5,h6{
  font-family:'GROBOLD';
  font-weight:normal;
  line-height:1.4em;
  letter-spacing:0.02em;
}

#wrap{
  background-color:#fff;
  position:relative;
  text-align:left;
  min-width:1000px;
}

.menuOpen{overflow:hidden;}

.max_width{
  margin:auto;
  max-width:1200px;
}

.max_width > *,
.max_width.col .wpupg-filter{
  margin-right:5%;
  margin-left:calc(5% - 5px);
}

.max_width.col > *{
  margin-right:3.333333%;
  margin-left:3.333333%;
}

*{transition:all 0.6s;}
*:hover{transition:all 0.1s;}

.hide_it{display:none;}

.max-width{
  margin:auto;
  padding:8rem 10%;
  max-width:1000px;
}

.max-width > h1{
  font-size:4em;
  text-align:center;
  margin-bottom:2rem;
}

/* =========================
   SOCIAL
========================= */
.social{
  font-size:1.5em;
  text-align:center;
  padding-top:1em;
}

.social span{display:none;}
.social li{float:left;}
.social li + li{margin-left:0.5em;}

.social a{
  display:block;
  background:#ffed00;
  border:solid 2px #ffed00;
  color:#000;
  text-decoration:none;
  border-radius:50%;
  line-height:2.5em;
  width:2.5em;
}

.social a:hover{
  background:#1D1D1D;
  color:#ffed00;
}

/* =========================
   NAV
========================= */
#primary_nav{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  z-index:4000;
  background:#070d0e;
  font-size:1.2em;
  border-bottom:solid 1px #444;
  min-width:1000px;
}

#primary_nav ul{text-align:center;}
#primary_nav li{display:inline-block;}

#primary_nav li a{
  display:block;
  color:#fff;
  padding:1.6em 0.5em;
  text-decoration:none;
  text-transform:uppercase;
  font-size:0.8em;
  letter-spacing:0.1em;
}

#primary_nav .tel{
  color:#fff;
  position:absolute;
  right:2%;
  top:0.6em;
}

#primary_nav .tel:before{
  content:"\f525";
  font-family:dashicons;
  display:inline-block;
  background:transparent;
  border:solid 2px #fff;
  border-radius:50%;
  width:1.8em;
  line-height:1.8em;
  text-align:center;
  color:#fff;
  margin-right:1em;
}

.menu-menu-principal-container{margin-left:2%;}

.header_logo{
  position:fixed;
  left:2%;
  top:-100%;
  width:13%;
  height:auto;
  display:block;
  z-index:5000;
}

.onScroll .header_logo{top:0.4em;}

/* =========================
   HEADER
========================= */
#home_header{
  position:relative;
  overflow:hidden;
  height:100vh;
  background:#070d0e;
  color:#fff;
  text-align:center;
}

#home_header .svg{
  display:block;
  width:100%;
  height:auto;
  position:absolute;
  bottom:-1px;
}

.content_Header{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:60%;
  z-index:100;
  font-size:1.5em;
}

.content_Header p{
  text-shadow:2px 2px 5px rgba(0,0,0,0.4);
}

.primary_logo{
  display:block;
  width:20em;
  margin:auto;
  height:auto;
  filter:invert(1);
}

.content_Header h2{padding:0.8em 0;}

#bg_content img{
  width:100%;
  height:auto;
  display:block;
}

#home_header #bg_content{
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width:100%;
}

#home_header #bg_content img{opacity:.6;}

#primary_content > section > div{position:relative;}

/* =========================
   EDITO / HORAIRES
========================= */
#edito{
  background:#ffed00;
  color:#000;
  text-align:center;
  position:relative;
}

#edito .max-width{
  padding-top:4em;
  padding-bottom:4em;
}

#edito h1{font-size:3.4em;}

#edito > section table{
  width:100%;
  text-align:center;
}

#edito > section table td{
  border-right:dotted 1px #444;
}

#edito > section table td:last-child{
  border-right:none;
}

#edito > section table tr:first-of-type td{
  padding:0.8em 0;
  text-transform:uppercase;
  background:#000;
  color:#fff;
  border-right:2px dotted #ffed00;
}

#edito > section table tr:first-of-type td:last-child{
  border-right:none;
}

#edito .tel{
  display:flex;
  text-align:left;
  font-size:1.5em;
  justify-content:space-around;
  margin-bottom:2em;
  position:relative;
}

#edito .tel p{
  width:20em;
  text-align:center;
}

#edito .tel strong{
  display:block;
  font-size:1.5em;
}

/* =========================
   CARTE MENU
========================= */
#la_carte{
  background:#000;
  position:relative;
  overflow:hidden;
}

#la_carte:after{
  content:"";
  display:block;
  background:transparent url(lib/svg/emportez-moi/down-btm-jaune.svg) no-repeat center top/contain;
  width:100%;
  height:5rem;
  position:absolute;
  top:0;
}

#la_carte .nav_slides{
  text-align:center;
  margin-bottom:2rem;
  border-top:solid 1px #888;
  border-bottom:solid 1px #888;
}

#la_carte .nav_slides li{display:inline-block;}

#la_carte .nav_slides li.activ a,
#la_carte .nav_slides li a:hover{
  color:#ffed00;
}

#la_carte .nav_slides li a{
  display:block;
  padding:0.2em 1em;
  margin:0 5%;
  text-decoration:none;
  color:#8b8d8e;
}

#la_carte table{
  width:100%;
  margin-bottom:2em;
  border-collapse:separate;
  border-spacing:0;
}

#la_carte table td,
#la_carte table th{
  padding:0.2em 1em;
  font-weight:normal;
}

#la_carte table td{text-align:center;}

#la_carte table thead td{
  background:#000;
  color:#fff;
  padding:0.5em;
  border-top:2px solid #ffed00;
  border-bottom:2px solid #ffed00;
}

#la_carte table thead td:nth-child(1){display:none;}

#la_carte table thead td:nth-child(2){
  background:transparent;
  border:none;
}

#la_carte table thead td:nth-child(3){
  border-left:2px solid #ffed00;
  border-top-left-radius:10px;
}

#la_carte table thead td:last-child{
  border-right:2px solid #ffed00;
  border-top-right-radius:10px;
  overflow:hidden;
}

#la_carte table th:nth-child(1){display:none;}

#la_carte table th:nth-child(2){
  text-align:left;
  width:17%;
}

#la_carte table th:nth-child(3){
  text-align:left;
  background:#ffed00;
  color:#000;
  letter-spacing:0.03em;
  font-size:1.1em;
  width:40%;
}

#la_carte table td{width:5em;}

#la_carte table img{
  display:block;
  width:90%;
  height:auto;
  margin:auto;
}

#la_carte h2{
  text-align:center;
  padding-bottom:1em;
}

#la_carte .slide > p{text-align:center;}

#la_carte a[href$=".pdf"]{
  display:inline-block;
  border-radius:5px;
  text-decoration:none;
  padding:0.5em;
  background:#ffed00;
  color:#000;
  margin-top:1em;
  margin-bottom:1em;
}

#la_carte a[href$=".pdf"]:before{
  content:"\f316";
  font-family:dashicons;
  margin-right:0.5em;
  position:relative;
  top:0.2em;
}

#la_carte a[href$=".pdf"]:hover{
  background:transparent;
  color:#ffed00;
  border:2px solid #ffed00;
}

#la_carte .lslide:nth-child(2) table:nth-child(2) tr:last-child td:first-child{
  display:none;
}

#la_carte .lslide:nth-child(2) table:nth-child(2) tr:last-child td:last-child{
  text-align:center;
}

#la_carte .formules_menu{
  text-align:center;
  font-size:1.4em;
  margin-top:2em;
}

#la_carte .formules_menu:before{
  content:"\f511";
  font-family:dashicons;
  display:inline-block;
  border:solid 3px #ffed00;
  color:#ffed00;
  font-size:2em;
  width:2em;
  line-height:2em;
  border-radius:50%;
  margin-bottom:0.8em;
}

.mention{
  font-size:0.7em;
  max-width:500px;
  margin:auto;
}

#la_carte table tbody tr{border-bottom:none;}

#la_carte table tbody th,
#la_carte table tbody td{
  border-bottom:1px solid #888;
}

/* =========================
   PRODUITS DU MOMENT
========================= */
#la_carte .prod_moment{
  display:flex;
  flex-wrap:nowrap;
  justify-content:space-between;
  align-items:stretch;
  overflow:visible;
  gap:2%;
}

#la_carte .prod_moment section{
  float:none;
  width:32%;
  margin:0 0 1.2em 0;
  padding:0;
  min-height:180px;
  box-sizing:border-box;
  display:flex;
  align-items:stretch;
  text-align:left;
  background:#ffed00;
  border-radius:5px;
}

#la_carte .prod_moment section + section{
  margin-left:0;
}

#la_carte .prod_moment .moment_friture{
  margin-left:0;
}

#la_carte .prod_moment section h1{
  display:none;
}

#la_carte .prod_moment section header{
  float:none;
  width:34%;
  min-width:105px;
  padding-top:0;
  box-sizing:border-box;
  background-repeat:no-repeat;
  background-position:center;
  background-size:82% auto;
  border-right:solid 1px #000;
}

#la_carte .prod_moment section p{
  flex:1;
  margin:0;
  padding:1.2em;
  box-sizing:border-box;
  color:#000;
}

#la_carte .prod_moment section p strong{
  font-weight:bold;
  color:#000;
}

#la_carte .prod_moment .moment_pizza header{
  background-image:url(lib/svg/emportez-moi/pizza_du_moment.svg);
}

#la_carte .prod_moment .moment_burger header{
  background-image:url(lib/svg/emportez-moi/burger_du_moment.svg);
}

#la_carte .prod_moment .moment_friture header{
  background-image:url(lib/svg/emportez-moi/friture_moment.svg);
}

/* =========================
   ACTUALITES
========================= */
#actualites{
  background:#ffed00;
  transition:all 0.6s;
  color:#000;
}

#actualites .slide{
  position:relative;
  display:none;
}

#actualites .slide.activ{display:block;}

#actualites h1,
#actualites h2,
#actualites h3,
#actualites h4,
#actualites h5,
#actualites h6{
  color:#000;
}

#actualites p,
#actualites li,
#actualites span{
  color:#000;
}

#actualites a{color:#000;}

.actuNav{
  position:absolute;
  left:53.5%;
  bottom:2em;
  z-index:100;
}

.actuNav li{
  display:inline-block;
  margin-right:1em;
}

.actuNav li a{
  display:block;
  border:solid 1px #000;
  background:#fff;
  color:#000;
  text-decoration:none;
  width:1.5em;
  line-height:1.5em;
  border-radius:50%;
  text-align:center;
}

#actualites .actuNav a:hover{
  background:#000;
  color:#fff;
  border-color:#000;
}

#actualites .actuNav a.activ,
#actualites .actuNav a.activ:link,
#actualites .actuNav a.activ:visited,
#actualites .actuNav a.activ:hover,
#actualites .actuNav a.activ:active{
  background:#000;
  color:#fff !important;
  border-color:#000;
}

#actualites .actuNav a.activ *{
  color:#fff !important;
}

#actualites .halfImg{
  position:absolute;
  left:0;
  top:0;
  width:50%;
  height:100%;
  background-color:#222;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

#actualites article{margin-left:55%;}
#actualites > h1{display:none;}

.contentBox h1{margin-bottom:1em;}
.contentBox p{margin-bottom:1em;}

/* =========================
   AVIS / COMMANDE / CONTACT
========================= */
#avis{
  background:#070d0e url(lib/img/concrete.jpg);
  background-attachment:fixed;
  color:#fff;
}

#avis:before{
  content:"";
  display:block;
  padding-top:33.333333%;
  width:100%;
  background:url(lib/img/emportez-moi/skyscrape.jpg) no-repeat center/cover;
}

#avis section{
  padding-top:4em;
  padding-bottom:4em;
}

#avis section > h1{display:none;}

#commande{
  background:#070d0e url(lib/img/emportez-moi/industrialBG.jpg) no-repeat top center/cover;
  color:#fff;
  position:relative;
}

#commande header{
  text-align:center;
  margin-bottom:2em;
}

#commande .the_adresses{
  display:flex;
  font-size:.9em;
}

#commande .the_adresses > div{
  width:50%;
  font-size:1.5em;
  text-align:center;
  padding:1em;
}

#commande .the_adresses > div + div{
  border-left:solid 1px grey;
  text-align:center;
}

#commande .the_adresses > div strong{
  font-weight:bold;
  display:block;
  color:#ffed00;
}

#commande .the_adresses p.glyph-buble{
  font-size:1.2em;
  margin:0.5em 0;
  color:#ffed00;
}

#commande .the_adresses p.glyph-buble:before{
  content:"\f525";
  font-family:dashicons;
  display:inline-block;
  background:transparent;
  border:solid 2px #ffed00;
  border-radius:50%;
  width:1.8em;
  line-height:1.8em;
  text-align:center;
  color:#ffed00;
  margin-right:0.3em;
}

#commande .the_adresses a{
  position:relative;
  overflow:hidden;
  display:block;
  color:inherit;
  text-decoration:none;
}

#commande .the_adresses a img{
  display:block;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}

#contact{
  position:relative;
  background:#070d0e url(lib/img/concrete.jpg);
  color:#fff;
  background-attachment:fixed;
}

#contact section{overflow:hidden;}
#contact section > h1{display:none;}

#contact .contentBox,
#contact .wpcf7{
  float:left;
  width:50%;
}

#contact .contentBox{
  width:45%;
  margin-right:5%;
}

form li{margin-bottom:1em;}

li label{
  display:block;
  color:#8e8e88;
  margin-bottom:0.5em;
}

li input,
li textarea{
  border:solid 1px transparent;
  border-bottom:solid 1px #8e8e88;
  padding:0.3em;
  background:none;
  color:#8e8e88;
  width:calc(100% - .6em);
}

li input:focus,
li textarea:focus{
  border:solid 1px #fff;
  color:#fff;
}

textarea{height:7em;}

input[type="submit"]{
  background:#ffed00;
  border:solid 2px #ffed00;
  color:#000;
  padding:0.5em;
  border-radius:5px;
  font-size:1.2em;
  margin-top:1em;
}

input[type="submit"]:hover{
  color:#ffed00;
  background:transparent;
}

form select{width:100%;}

/* =========================
   VALEURS / SLIDER / FOOTER
========================= */
#valeurs{
  background:#fff;
  color:#000;
}

#valeurs > section h1:before{
  content:"\f313";
  font-family:dashicons;
  display:block;
  color:#2d1f1f;
  font-size:1.3em;
  width:2em;
  margin:auto;
  text-align:center;
}

#valeurs .colIt{
  -moz-column-count:2;
  -webkit-column-count:2;
  -o-column-count:2;
  column-count:2;
  -moz-column-gap:20px;
  -webkit-column-gap:20px;
  -o-column-gap:20px;
  column-gap:20px;
}

#valeurs h1{color:#000;}
#valeurs p{color:#000;}
#valeurs p strong{color:#000;}

#slider{background:#070d0e;}
#slideShow3 img{opacity:0.7;}

#primary_footer{
  position:relative;
  overflow:hidden;
  background:#070d0e url(lib/img/emportez-moi/frise.png);
  text-align:center;
  line-height:1.8em;
  padding-top:4rem;
  padding-bottom:4rem;
  color:#fff;
}

#primary_footer .blk_adresse:before{
  content:"";
  height:6rem;
  display:block;
  background:url(lib/svg/emportez-moi/icon_emportez-moi.svg) no-repeat center top/contain;
  opacity:1;
  margin-bottom:2em;
}

#primary_footer .blk_adresse{margin-bottom:1em;}
#primary_footer .blk_adresse h1{display:none;}

#primary_footer a{
  color:#fff;
  text-decoration:none;
}

#primary_footer a:hover{color:#fff;}

/* icone italien */
#la_carte table .iconItalien{
  width:5em;
  height:5em;
}

/* Bouton commande */
#commande .bt_com{
  text-align:center;
  margin-top:1em;
}

#commande .bt_com a,
#commande .bt_com a:link,
#commande .bt_com a:visited{
  display:inline-block;
  background:#ffed00;
  padding:0.3em 1em;
  border-radius:5px;
  color:#000 !important;
  border:2px solid transparent;
  text-decoration:none;
}

#commande .bt_com a:hover{
  background:transparent;
  color:#ffed00 !important;
  border:2px solid #ffed00;
}

/* =========================
   RESPONSIVE
========================= */
@media only screen and (max-width: 1150px){
  #wrap{min-width:1000px;}
  body{font-size:0.9em;}
  .max_width.col{padding:0 3.333332%;}
}

@media screen and (min-width: 320px) and (max-width: 667px){

  #wrap{min-width:320px;}

  .max-width{
    padding-top:4rem;
    padding-bottom:4rem;
  }

  #primary_nav{display:none;}

  #home_header{
    height:auto;
    background:url("lib/img/emportez-moi/burger.jpg") no-repeat center/cover;
  }

  #home_header video{display:none;}

  .content_Header{
    position:static;
    transform:none;
    width:60%;
    font-size:1.2em;
  }

  .primary_logo{width:100%;}

  #home_header #bg_content img{
    width:auto;
    height:100vh;
    opacity:.6;
  }

  .header_logo{display:none;}

  .max-width > h1,
  #edito h1{
    font-size:2em;
  }

  #edito > section table tr{
    display:block;
    float:left;
    width:50%;
  }

  #edito > section table tr:first-of-type td{
    padding:0;
  }

  #edito > section table td{
    width:100%;
    display:block;
    height:6em;
    border:none;
    border-bottom:dotted 1px #444;
    position:relative;
  }

  #edito > section table td p{
    position:absolute;
    left:50%;
    top:50%;
    width:100%;
    transform:translate(-50%, -50%);
  }

  #actualites .max-width{
    padding-top:2em;
    padding-bottom:4em;
  }

  #actualites article{margin-left:0;}

  #actualites .halfImg{
    width:100%;
    position:relative;
    height:20em;
  }

  .actuNav{
    position:static;
    margin-top:1em;
    text-align:center;
  }

  .contentBox h1{text-align:center;}

  #commande .the_adresses{
    flex-direction:column;
  }

  #commande .the_adresses > div{
    width:auto;
    font-size:1.5em;
    padding:1em;
  }

  #commande .the_adresses > div + div{
    border-left:none;
  }

  #contact .contentBox{
    margin-bottom:1em;
    text-align:center;
  }

  #contact .contentBox,
  #contact .wpcf7{
    width:100%;
    margin-right:0;
  }

  .social{
    text-align:center;
    margin-bottom:2em;
  }

  #contact ul + p{text-align:center;}
  input[type="submit"]{display:inline-block;}

  .social li{
    display:inline-block;
    float:none;
  }

  #valeurs .colIt{
    column-count:1;
  }

  #valeurs .colIt h2{
    text-align:center;
    padding-bottom:2em;
  }

  /* Produits du moment mobile */
  #la_carte .prod_moment{
    display:block;
    overflow:visible;
  }

  #la_carte .prod_moment section{
    float:none;
    width:auto;
    margin:0 0 1.2em 0;
    padding:0;
    min-height:150px;
    display:flex;
    align-items:stretch;
    background:#ffed00;
    border-radius:5px;
  }

  #la_carte .prod_moment .moment_friture{
    margin-left:0;
  }

  #la_carte .prod_moment section header{
    float:none;
    width:34%;
    min-width:110px;
    min-height:140px;
    padding-top:0;
    border-right:solid 1px #000;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
  }

  #la_carte .prod_moment section p{
    flex:1;
    margin:0;
    padding:1em;
    color:#000;
  }

  #la_carte .prod_moment section p strong{
    color:#000;
    font-weight:bold;
  }

  #la_carte .nav_slides li{
    display:block;
    font-size:1.3em;
  }

  /* ===== TABLE MOBILE : header ===== */
  #primary_content #la_carte table thead tr{
    display:flex !important;
    flex-wrap:wrap;
    overflow:visible;
  }

  #primary_content #la_carte table thead td{
    float:none !important;
    width:auto !important;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    padding:0.6em 0.5em;
    border-radius:0 !important;
    line-height:1.15em;
  }

  #primary_content #la_carte table thead td:nth-child(1),
  #primary_content #la_carte table thead td:nth-child(2){
    display:none !important;
  }

  #primary_content #la_carte table thead td:nth-child(3){
    flex:0 0 100%;
    width:100% !important;
    background:#000;
    color:#fff;
    border:2px solid #ffed00;
    border-bottom:0;
    border-top-left-radius:10px !important;
    border-top-right-radius:10px !important;
    padding:0.6em 0.5em;
  }

  #primary_content #la_carte table thead td:nth-child(n+4){
    flex:1 0 0;
    background:#000;
    color:#fff;
    border-top:2px solid #ffed00;
    border-bottom:2px solid #ffed00;
    text-align:center;
    padding:0.6em 0.4em;
  }

  #primary_content #la_carte table thead td:nth-child(4){
    border-left:2px solid #ffed00;
    border-bottom-left-radius:10px !important;
  }

  #primary_content #la_carte table thead td:last-child{
    border-right:2px solid #ffed00;
    border-bottom-right-radius:10px !important;
  }

  /* ===== TABLE MOBILE : cards ===== */
  #primary_content #la_carte tbody tr{
    display:block;
    background:#000;
    margin-bottom:0.5em;
    border-bottom:1px solid #888;
    padding-bottom:0.7em;
  }

  #primary_content #la_carte table tbody th{
    display:block;
    width:auto;
    text-align:center;
    border-bottom:none !important;
  }

  #primary_content #la_carte tbody td{
    display:inline-block !important;
    vertical-align:top;
    background:#000;
    color:#ffed00;
    padding:0.5em;
    margin-top:0.5em;
    font-size:1.3em;
    border-bottom:none !important;
    box-sizing:border-box;
    text-align:center;
  }

  #primary_content #la_carte table[data-cols="3"] tbody td{
    width:30%;
  }

  #primary_content #la_carte table[data-cols="2"] tbody td{
    width:46%;
  }

  #primary_content #la_carte table[data-cols="1"] tbody td{
    width:96%;
    display:block !important;
    margin-left:auto;
    margin-right:auto;
  }

  #edito .tel{
    flex-direction:column;
  }

  #edito .tel p{
    width:100%;
    margin:0;
    text-align:center;
  }

  #edito .tel p + p{
    margin-top:1em;
  }
}