@media screen and (max-width: 1024px) {
  header{
    .navbar{
      li{
        margin-right: 20px!important;
      }
      .tags{
        a{
          padding: 0 10px;
          -webkit-transition: padding 0.5s;
          transition: padding 0.5s;
        }
      }
    }
  }
}

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

header{
  position: fixed;
  width: 100%;
  height: 40px;
  top: 0;
  padding: 0 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  background-color: white;
  border-bottom: 2px solid rgb(0,0,0);
  z-index: 999;

  h1{
    margin: auto 0;
  }

  nav{
    ul{
      display: none;
      &.open{
        // height: 100vh;
        width: 100vw;
        left: 0;
        top: 38px;
        position: absolute;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        border-bottom: 2px solid #000;
        background: white;
        li{
          height: 40px;
          text-align: center;
          border-bottom: 2px solid black;
          width: 100vw;
          text-align: center;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          &:first-child{
            border-top: 2px solid black;
            // flex-direction: column;
            .cat{
              width: 10px;
              position: absolute;
              right: 45px;
              img{
                -webkit-transform: rotate(0deg);
                        transform: rotate(0deg);
              }
            }
          }
          &:last-child{
            margin-right: 20px!important;
            border-bottom: 0px solid #000;
          }
          &.act{
            .cat{
              img{
                -webkit-transform: rotate(180deg);
                        transform: rotate(180deg);
              }
            }
          }
        }
        .tags{
          position: relative;
          border: none;
          top:-2px;
          border-bottom: 2px solid black;
          background: rgb(0, 255, 0);
          a{
            padding: 0;
            margin:0;
            height: 40px;
            li{
              margin: 0;
            }
          }
        }
      }
    }

    & > .tags{
      & > a {
        height: 30px!important;
        li{
          position: relative;
          z-index: 0;
          &::after{
            content: " ";
            position: absolute;
            background: rgb(0, 255, 0);
            height: 10px;
            margin: auto;
            z-index: -1;
            -webkit-transition: width 0.5s;
            transition: width 0.5s;
            width: 0%;
          }
        }
        &:hover{
          li{
            &::after{
              content: " ";
              position: absolute;
              background: rgb(0, 255, 0);
              height: 10px;
              margin: auto;
              z-index: -1;
              width: 100%;
              -webkit-transition: width 0.5s;
              transition: width 0.5s;
            }
          }
        }
      }
    }

    .col {
      width: auto;
      text-align: center;
      height: auto;
      position: absolute;
      top: 10px;
      right: 20px;
    }
    .burger{
      cursor: pointer;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      width: auto;
      margin: 0 auto;
      -webkit-transition: all .7s ease;
      transition: all .7s ease;
      .bar {
        display: block;
        height: 2px;
        width: 20px;
        background: black;
        margin: 3px auto;
        -webkit-transition: all .7s ease;
        transition: all .7s ease;
      }
      .middle {
        margin: 0 auto;
      }
      &:hover{
        // .bar{
        //   background-color: rgb(0, 255, 0);
        // }
        .top {
          -webkit-transform: translateY(5px) rotateZ(45deg);
          transform: translateY(5px) rotateZ(45deg);
        }
        .middle {
          width: 0;
        }
        .bottom {
          -webkit-transform: translateY(-5px) rotateZ(-45deg);
          transform: translateY(-5px) rotateZ(-45deg);
        }
      }
    }
  }

  ul.tags{
    display: none;
  }

  ul.visible, ul.active{
    border-left: 2px solid black;
    border-bottom: 2px solid black;
    background: white;
    display: block;
    position: absolute;
    top: 40px;
    right: 0px;
    width: auto;
    z-index: 999;
    a{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: auto;
      height: 40px;
      padding: 0 20px;
      &:first-child{
        margin-top: 0px;
      }
      &:last-child{
        margin-bottom: 10px;
      }
      li{
        margin: auto;
      }
    }
  }
  }

  #start{
    margin-top: 40px;
    //home
    .item{
      display: block;
      .card{
        position: relative;
        width: 100%;
        overflow-y: hidden;
        padding-bottom: 5px;
        margin-left: 0px!important;
        margin-right: 0px!important;
        &:last-child{
          padding-bottom: 0px!important;
        }
        .card-image:hover{
          -webkit-transition: all 0.6s;
          transition: all 0.6s;
          background-color: rgb(0, 255, 0);
          img{
            -webkit-transition: all .6s;
            transition: all .6s;
            mix-blend-mode: multiply;
            opacity: .95;
          }
        & ~ .card-title{
          top: 50%;
          left: 50%;
          opacity: 1;
          -webkit-transition: opacity 1s, top 0s;
          transition: opacity 1s, top 0s;
          }
        }
        .card-title{
          pointer-events: none;
          position: absolute;
          left: 50%;
          top: 50%;
          opacity: 0;
          -webkit-transition: all 1s;
          transition: all 1s;
          -webkit-transform: translate(-50% , -50%);
                  transform: translate(-50% , -50%);
        }
      }
    }
    //pageprojet
    .content-item{
      .e-content{
        display: block;
        height: 100%;
      }
      .media{
        width: 100%;
      }
      .content{
        width:100%;
        min-width: auto!important;
        height: auto;
        .txt{
          position: relative;
          right: 0;
          width: 100%;
          min-width: auto!important;
          height: auto!important;
          padding: 20px 20px 0px 20px;
          overflow-x: auto;
          h3{
            margin: 0px 0 10px 0;
          }
        }
        .taxonomy{
          width: 100%;
          min-width: auto!important;
          height: auto;
          background: white;
          position:relative;
          bottom: 0;
          border-top: 2px solid black;
          .tags{
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
            margin: auto 0;
            padding-bottom: 10px;
            a{
              margin: 10px 10px 0 10px;
              &:first-child{
                margin-left: 20px!important;
              }
            }
          }
        }
      }
    }
    //page news
    .news{
      width: 100%;
      min-width: auto!important;
      height: auto;
      padding: 10px 20px 10px 20px;
      border-bottom: 2px solid black;
      &:nth-child(1){
        padding-top: 20px;
      }
      h3{
        pointer-events: none;
        margin-bottom: 10px;
      }
    }
    .about{
      width:100%;
      min-width: auto!important;
      height: auto;
      padding: 20px;
      h3{
        pointer-events: none;
        margin-bottom: 10px;
      }
    }
  }
}