/*************** Éléments divers ***************/

.invisible { display:none; }
.nettoyeur { clear:both; }

a, a b { color:#934B39; }
a:hover { color:#C32700; }

p {
  line-height:1.5em;
  margin-bottom:1em;
  margin-top:0.5em;
}

h1 {
  text-align:center;
  border-bottom-style:double;
  border-color:#baaca6;
  font-family:"Ropa Sans",Arial,Helvetica,sans serif;
  color:#4c342c;
  font-weight:400;
  font-variant:small-caps;
  text-shadow:0 1px 2px #ddd;
  margin-top:0;
  padding-bottom:0.3em;

  &.page-title {
    margin-top: -50px;
  }
}
h2,h3,h4 {
  font-family:"Ropa Sans",Arial,Helvetica,sans serif;
  font-weight:400;
  font-variant:small-caps;
}
h2 {
  margin-top:1em;
  margin-bottom:0.5em;
  border-bottom:8px solid #4c342c;
}
h3 {
  margin-top:0.6em;
  margin-bottom:0.1em;
}
h4,h5,h6 {
  margin-top:0.2em;
  margin-bottom:0.1em;
}

img { max-width: 100%; }

.pull-right {
  @media only screen and (min-width: 412px) {
    position: absolute;
    right: 0;
  }
  @media only screen and (max-width: 412px) {
    display: block;
  }
}

/***************Structure***************/

*{ outline:none !important; }

html {

  @media only screen and (min-width: 960px) {
    background:url('../img/fond_planche.jpg') repeat-y center -75px #000;
  }
  @media only screen and (max-width: 959px) {
    background-color:#faf3e3;
  }

  line-height:1.2;
  height:100%;

  body {
    height:auto;
    width:100%;
    display:block;
    /* display:table; */
    border-collapse:collapse;
    margin:0;
    font-family:"Playfair Display",Georgia,"Times New Roman",serif;
    color:#4c342c;
    background:url('../img/fond.jpg') repeat-x center top;

    a {
      text-decoration:none;
      &:hover{ text-decoration:underline; }
    }

    em { font-style: italic; }

    hr {
      background-color:#bbb;
      color:#bbb;
      height:1px;
      border:0;
    }

    table { border-collapse:collapse; }
  }
}

#menu {

  width:90%;
  max-width:800px;
  margin:auto;
  text-align: center;

  ul {
    list-style: outside none none;
    margin:0;
    padding:0;
    display:flex;
    justify-content:space-between;

    li {
      float: left;
      width: 20%;
      margin:0;
      font-size:1.2em;
      font-weight:400;

      a {
        font-family:"Ropa Sans",Arial,sans serif;
        color:#fff;
        transition: all 0.2s linear;
        text-shadow:0 1px 5px #000;
        height:2em;
        line-height:1.8em;
        &:hover {
	        background:rgba(228,216,200,0.4);
          text-decoration:none;
        }
        &:active, &:visited {
          min-width:6em;
          min-height:2em;
          padding:0;
          text-align:center;
        }
      }

      strong a, strong a:visited, strong a:hover {
        text-shadow:0 1px 3px #333;
      }
      strong a:hover { text-decoration:none; }
    }

    @media only screen and (min-width: 361px) {
      li { float:left;width:33%; }
    }
    @media only screen and (min-width: 481px) {
      li { float:left; width:auto; }
    }
  }

  @media only screen and (max-width: 428px) {
    margin-top: 40px;
  }
  @media only screen and (min-width: 428px) {
    margin-bottom:1em;
    ul li a:hover {
      background:transparent;
      text-decoration:underline;
    }
  }
}

#footer {
  display:block;
  /* display:table-row; */
  height:3em;
  text-align:center;
  font-size:0.8em;
  background:linear-gradient(to top, #111, #222);
  color:#ccc;
  border-top:1px solid #222;
  box-shadow: 0 0 50px 10px rgba(0, 0, 0, 0.4);
}

#document {
  max-width:780px;
  padding:0 2em 5em 2em;
  margin:auto;
  margin-top:80px;
  font-size:1em;

  @media only screen and (max-width: 750px) {
    padding:0.5em 0.5em 5em 0.5em;
  }
}

#banniere {
  text-align:center;
}

@media only screen and (min-width: 751px) {
  #img_banniere {
    margin-top:20px;
    margin-bottom:0;
    width:auto;
  }
}

.colonnes {
  text-align:justify;
  -webkit-columns:2 300px;
  -moz-columns:2 300px;
  columns:2 300px;
  padding-bottom:0.5em;
  margin-bottom:1.5em;
  -webkit-column-gap:2em;
  -moz-column-gap:2em;
  column-gap:2em;
  -webkit-column-rule: 1px solid #baaca6;
  -moz-column-rule: 1px solid #baaca6;
  column-rule: 1px solid #baaca6;

  &.c3 {
    columns: 3 200px;
    @media only screen and (max-width: 480px) {
      columns: 3 150px;
    }
  }

  h1, h2,  h3,  h4,  h5,  h6 {
    text-align:left;
    margin:0.5em 0;
  }

  p {
    margin: 0 0 1em 0;
    text-indent:1em;
  }
}

.centre {text-align:center;}

#liens-vignettes {
  margin: 2em auto;

  #lien_sc, #lien_fb, #lien_mail {
    position:fixed;
    top:-21px;
    z-index:2001;
    box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.9);
    transition: all 0.3s cubic-bezier( .6, 2, .4, 1.5);
    transform: rotate(6deg);
    &:hover {
      position:fixed;
      top:-15px;
      z-index:2001;
      transform: rotate(1deg);
    }
  }
  #lien_sc { right:90px; }
  #lien_fb { right:150px; }
  #lien_mail { right:210px; }

  @media only screen and (max-width: 750px) {
    #lien_sc { right:20px; }
    #lien_fb { right:70px; }
    #lien_mail { right:120px; }
  }
  @media only screen and (max-width: 480px) {
    #lien_sc, #lien_fb, #lien_mail {
      transform: rotate(0);
    }
    #lien_fb {
      right:3px;
    }
    #lien_sc {
      right:3px;
      top:11px;
      z-index:2000;
      &:hover{
        top:17px;
        z-index:2000;
      }
    }
    #lien_mail {
      right:3px;
      top:43px;
      z-index:1999;
      &:hover{
        top:49px;
        z-index:1999;
      }
    }
  }
}

img#homepage-band-photo {
  border: solid 5px white;
  max-width: 100%;
  box-shadow: 2px 2px 5px 0px #656565;
  border-radius: 20px;
  margin-top: -5px;
  margin-bottom:15px;
}

img#bandpage-band-photo {
  border: 5px solid #f6f9f0;
  box-shadow: 2px 2px 5px 0px #656565;
  transform: rotate(-0.25deg);
}

img#gigpage-band-photo {
  width: 100%;
  box-shadow: 1px 1px 4px 0px #656565;
}

#upcoming-gig-list {

  width: 70%;
  margin: auto;

  .upcoming-gig {
    padding: 1rem 0;
    h3 {
      width: 100%;
      position: relative;
    }
    .gig-misc-info img {
      display: block;
      width: auto;
      margin: auto;
    }
  }

  .gig-separator {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 15px;
    background: url(../img/divider.png);
    background-repeat: no-repeat;
    background-position: center;
  }
}

#archived-gig-list {
  text-align: center;
  .gig-table {
    margin-top: 1rem;
    width: 100%;
    tr td {
      width: 25%;
      padding: 5px 0;
    }
  }
}