@import "Skeleton-Sass-master/scss/skeleton.scss";

html{font-family: "Ubuntu", Arial, "MS Trebuchet", sans-serif;}

p{margin:0 0 1em 0;}
ul,li{margin:0;padding:0;list-style: none;}
a, a:active{
  color:inherit;
  text-decoration: none;
  transition: color,border-color 0.3s ease-in-out;
  border-bottom: dashed 1px transparent;
}
a:hover{
  color:inherit;
  border-bottom: dashed 1px #000;
}

body{
    // background-color: #ddd;
}

#container{
  background-color: #1A1A1A;
}

#header{
  position: fixed; top:0; width:100%; line-height: 1;
  padding:1.5em 0 0.5em;
  z-index: 2;
  background-color: #1A1A1A;
  color: #fff;
  text-align: justify;
  opacity: 0.8;

  &:after{
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size:0;
    line-height:0;
  }

  #logo{
    display: inline-block;
    vertical-align: baseline;
    padding:0 1em;
    h3{
      margin:0;
      font-size: 1.4em;
      @media (#{$bp-larger-than-phablet}) {
        font-size: 1.8em;
      }
    }
  }

  #navbar{
    display:inline-block;
    vertical-align: baseline;
    text-align: right;
    // float: right;
    padding: 0 1em 0;
    a{margin: 0  0 0 1em;}
    color:rgb(196, 196, 196);
  }
}

#content{
  padding:5em 0;
}

#dashboard-filters{
  height:1px; overflow: hidden;

  @media (#{$bp-larger-than-phablet}) {
    width:20%;height:auto;
    display:inline-block;
    vertical-align: top;
  }
  @media (#{$bp-larger-than-desktop}) {
    width:15%;
  }
  ul{
    margin:0; padding:0 1em 1em;
  }
  h2{margin:0; font-size: 1em; color:#fff;}
  li{
    margin:0; padding:0; list-style: none;

    a{display:block; font-size: 0.8em;color:#878484;}
    &.active,&:hover{
      a{color:#fff;}
    }
  }
}

#dashboard-projects{
  @media (#{$bp-larger-than-phablet}) {
    width:75%;
    display:inline-block;
    vertical-align: top;
  }
  @media (#{$bp-larger-than-desktop}) {
    width:80%;
  }
  section.project{
    display:inline-block;
    vertical-align: top;
    min-height:150px;

    // background-color: green;
    background-color: #fff;

    position: relative;

    width:100%;
    margin:0 2% 2% 0;
    padding:0;

    @media (#{$bp-larger-than-phablet}) {
      width:49%;
      margin:0 1% 1% 0;
    }
    @media (#{$bp-larger-than-desktop}) {
      width:32%;
      // margin:0 1% 2% 0;
    }
    // @media (#{$bp-larger-than-desktophd}) {
    //   width:24%;
    //   // margin:0 1% 2% 0;
    // }



    .mask, .mask a{
      position:absolute;
      width:100%; height:100%;
    }
    header{
      position:absolute; bottom:0;
      width:100%;
      text-align: left;
      background-color: rgba(0, 0, 0, 0.7);
      color:#fff;
      transition: opacity 0.3s ease-in-out;
      padding:10px 0 0;
      >*{padding:0 10px; margin:0;}
      h1{
        font-size: 0.9em;
      }
      p{
        font-size: 0.756em;
      }
      @media (#{$bp-larger-than-phablet}) {
        opacity:0;
      }
    }


    &:hover{
      header{
        opacity:1;
      }
    }

    figure{margin:0; line-height: 0;}
    img{width: 100%; max-width: 100%;}
  }
}

.page-projet{
  padding:1em;
  color:#878484;
  width:80%;
  h2#page-title{
    margin:0;
    color:#fff;
  }


  nav{
    .taxonomy{
      ul{
        margin:0; padding:0;
        @media (#{$bp-larger-than-phablet}) {
          display:inline-block;
        }
        h2, li{
          display:inline-block;
          margin:0; padding:0;
        }

      }
      ul{
        margin:0 1em 0 0;
        h2{
          font-size: 1em;
          &:after{
            content:":";
          }
        }
        li{
          font-size: 1em;
        }
      }
    }
  }
  .videos{
    padding:1em 0;
    width:100%;
    video{max-width: 100%;}
  }
  .images{
    padding:1em 0;
    a{
      margin:0 0 1em 0;
      @media (#{$bp-larger-than-phablet}) {
        display:inline-block; width:48%; vertical-align: top;
        margin:0 1% 2% 0;
      }
      @media (#{$bp-larger-than-desktop}) {
        display:inline-block; width:32%; vertical-align: top;
        margin:0 0.4% 2% 0;
      }

      border-bottom: 0;
      &:hover{border-bottom: 0;}

      img{ width:100%; max-width: 100%;}
    }
  }
  .link{
    font-weight: bold; margin:0 0 1em;
  }
  footer{
    label{font-weight: bold;}
  }
}


#footer{
  padding: 1em 0;
  text-align: center;
}