.shade {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  z-index: 1000000; }

// first material popup
#material-light{
  display: none;
  position: fixed;
  z-index: 10000000;
  @include center();
  background: #fff;
  padding: 12px;
  width: 40%;
  height: auto;
  @include radius(2px);
  @include box-shadow(0px ,10px ,24px ,rgba(0,0,0,0.7));
  @media(max-width: 600px){
    width: 90%;
    height: 60%;
    overflow-y: scroll;
  }
  h1{
    @include small();
    color: #000;
    opacity: 0.8;
    letter-spacing: 0px;
    line-height: 120%;
    font-size: 20px;
    padding: 12px;
    font-weight: 800;
  }
  p{
    padding: 12px;
    line-height: 160%;
    font-size: 18px;
    color: rgba(0,0,0,0.4);
    font-weight: 500;
    letter-spacing: 0px;
    margin-top: -12px;
  }
  .exit{
    color: #009688 !important;
    padding: 6px;
    @include small();
    background: #fff;
    position: absolute;
    bottom: 12px;
    right: 12px;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    @media(max-width: 600px){
      overflow: hidden;
      position: relative !important;
      bottom: 20px;
      right: 0px;
      text-align: right;
    }

    &:hover{
      background: #eee;
    }
  }


}
#material-dark{
  display: none;
  position: fixed;
  z-index: 10000000;
  @include center();
  background: #282C34;
  padding: 12px;
  width: 40%;
  height: auto;
  @include radius(2px);
  @include box-shadow(0px ,10px ,24px ,rgba(0,0,0,0.7));
  @media(max-width: 600px){
    width: 90%;
    height: 60%;
    overflow-y: scroll;
  }
  h1{
    @include small();
    color:#eeeeee;
    opacity: 0.8;
    letter-spacing: 0px;
    line-height: 120%;
    font-size: 20px;
    padding: 12px;
    font-weight: 800;
  }
  p{
    padding: 12px;
    line-height: 160%;
    font-size: 18px;
    color: #eeeeee;
    font-weight: 500;
    letter-spacing: 0px;
    margin-top: -12px;
  }
  .exit{
    color:#009688 !important;
    padding: 6px;
    @include small();
    position: absolute;
    bottom: 12px;
    right: 12px;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    @media(max-width: 600px){
      overflow: hidden;
      position: relative !important;
      bottom: 20px;
      right: 0px;
      text-align: right;
    }


    &:hover{
      background: #212121;
    }
  }

}
#material-light-anime{
  @include trans(0.5s, (cubic-bezier(.55,0,.1,1)));
  display: none;
  overflow:hidden !important;
  width: 20px;
  height: 20px;
  position: fixed;
  z-index: 10000000;
  @include center();
  background: #fff;
  padding: 12px;
  @include radius(100%);
  @include box-shadow(0px ,10px ,24px ,rgba(0,0,0,0.7));
  @media(max-width: 600px){

    overflow-y: scroll !important;

  }
  h1{
    @include small();
    @include trans(0.3s, (cubic-bezier(.55,0,.1,1)));
    color: #000;
    opacity: 0.0;
    letter-spacing: 0px;
    line-height: 120%;
    font-size: 20px;
    padding: 12px;
    font-weight: 800;
    overflow: hidden;
    margin-top: 40px;
  }
  p{
    @include trans(0.2s, (cubic-bezier(.55,0,.1,1)));
    opacity: 0.0;
    overflow: hidden;
    padding: 12px;
    line-height: 160%;
    font-size: 18px;
    color: rgba(0,0,0,0.4);
    font-weight: 500;
    letter-spacing: 0px;
    margin-top: 20px;
  }


  .exit{
    color: #009688 !important;
    padding: 6px;
    @include small();
    background: #fff;
    position: absolute;
    bottom: 12px;
    right: 12px;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    @media(max-width: 600px){
      overflow: hidden;
      position: relative !important;
      bottom: 20px;
      right: 0px;
      text-align: right;
    }


    &:hover{
      background: #eee;
    }
  }


}
#material-dark-anime{
  @include trans(0.5s, (cubic-bezier(.55,0,.1,1)));
  display: none;
  overflow:hidden !important;
  width: 20px;
  height: 20px;
  position: fixed;
  z-index: 10000000;
  @include center();
  background:#282C34;
  padding: 12px;
  @include radius(100%);
  @include box-shadow(0px ,10px ,24px ,rgba(0,0,0,0.7));
  @media(max-width: 600px){

    overflow-y: scroll !important;

  }
  h1{
    @include small();
    @include trans(0.3s, (cubic-bezier(.55,0,.1,1)));
    color: #eeeeee;
    opacity: 0.0;
    letter-spacing: 0px;
    line-height: 120%;
    font-size: 20px;
    padding: 12px;
    font-weight: 800;
    overflow: hidden;
    margin-top: 40px;
  }
  p{
    @include trans(0.2s, (cubic-bezier(.55,0,.1,1)));
    opacity: 0.0;
    overflow: hidden;
    padding: 12px;
    line-height: 160%;
    font-size: 18px;
    color: #eeeeee !important;
    font-weight: 500;
    letter-spacing: 0px;
    margin-top: 20px;
  }
  .exit{
    color: #009688 !important;
    padding: 6px;
    @include small();
    position: absolute;
    bottom: 12px;
    right: 12px;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    @media(max-width: 600px){
      overflow: hidden;
      position: relative !important;
      bottom: 20px;
      right: 0px;
      text-align: right;
    }


    &:hover{
      background: #212121;
    }
  }


}
#ios-light{
  position: fixed;
  overflow: hidden;
  width: 40%;
  height: auto;
  padding: 0px;
  background: #F9F9F9;
  opacity: 1;
  z-index: 1000000000;
  @include radius(8px);
  @include center();
  display: none;
  opacity: 0.8;
  @media(max-width: 600px){
    width: 90%;
    height: auto;

  }
  h1{
    padding-top: 20px;
    color: #000;
    @include small();
    letter-spacing: 0px;
    font-size: 18px;
    font-weight: 900;

  }
  p{
    font-weight: 500;
    font-family: sans-serif;
    margin-top: -4px;
  }
  .exit{
    font-weight: 900;
    @include small();
    color: #0075FF;
    width: 100%;
    border-top: 1px solid rgba(0,0,0,0.4);
    padding-top: 12px;
    padding-bottom: 12px;
    cursor: pointer;
    &:hover{
      background: #ccc;
    }
  }
}
#ios-dark{
  position: fixed;
  overflow: hidden;
  width: 40%;
  height: auto;
  padding: 0px;
  background:rgba(0,0,0,0.7);
  opacity: 1;
  z-index: 1000000000;
  @include radius(8px);
  @include center();
  display: none;
  opacity: 0.8;
  @media(max-width: 600px){
    width: 90%;
    height:auto;

  }
  h1{
    padding-top: 20px;
    color: #fff;
    @include small();
    letter-spacing: 0px;
    font-size: 18px;
    font-weight: 900;
  }
  p{
    font-weight: 500;
    font-family: sans-serif;
    margin-top: -4px;
    color: #fff;
  }
  .exit{
    font-weight: 900;
    @include small();
    color: #fff;
    width: 100%;
    border-top: 1px solid rgba(225,225,225,0.4);
    padding-top: 12px;
    padding-bottom: 12px;
    cursor: pointer;
    &:hover{
      background: #303030;
    }
  }
}
#modern-light{
  top: 40% !important;
  position: fixed;
  @media(min-width: 620px){
    @include center();
  }
  z-index: 100000000;
  width: 40%;
  height: auto;
  display: none;
  @media(max-width: 600px){
    width: 100%;
    height: 80%;
    top: 40% !important;
    left: 10%;

}
  h1{
    color: #000;
    position: absolute;
    top: -60px;
    left: -80px;
    font-size: 42px;
    letter-spacing: -1px;
    @include big();
    font-weight: 900;
    z-index: 20;
    @media(max-width: 600px){
      left: -30px;
      font-size: 26px;
    }
  }
  p{
    position: absolute;
    left: 80px;
    top: -90px;
    background: #fff;
    padding: 29px;
    padding-top: 90px;
    @include small();
    @media(max-width: 600px){
      width: 90%;
      height: 60%;
      left: 0px;
      overflow-y: scroll;
    }
  }
  .exit{
    position: absolute;
    top: -46px;
    right: 44px;
    color: #fff;
    cursor: pointer;
    @include small();
    font-weight: 900;
    padding: 6px;
    z-index: 100 !important;
    letter-spacing: 1px;
    @media(max-width: 600px){
      right: 90px;
    }
    @media(max-width: 400px){
      right: 40px;
      font-size: 10px;
      top: -60px;
    }
    &::after{
      position: absolute;
      bottom: -4px;
      left: -4px;
      background: #000;
      content: "";
      height: 100px;
      width: 58px;
      @include trans(0.3s, (cubic-bezier(.55,0,.1,1)));
      z-index: -1;
      @media(max-width: 600px){
        width: 40px;
      }
    }
    &:hover{
      color: #000;
    }

    &:hover::after{
      height: 2px;
    }
  }
}
#modern-light-anime{
  top: 60%;
  left: 50%;
  transform: translate3d(-50% ,-50% ,0);
  position: fixed;
  z-index: 100000000;
  width: 40%;
  height: auto;
  display: none;
  opacity: 0.0;
  @include trans(0.5s, (cubic-bezier(.55,0,.1,1)));
  h1{
    color: #000;
    position: absolute;
    top: -60px;
    left: -80px;
    transform: translate3d(0 ,60px ,0);
    font-size: 42px;
    letter-spacing: -1px;
    @include big();
    font-weight: 900;
    z-index: 20;
    @include trans(0.6s, (cubic-bezier(.55,0,.1,1)));
    @media(max-width: 600px){
      left: -30px;
      font-size: 26px;
    }
  }
  p{
    position: absolute;
    left: 80px;
    top: -90px;
    background: #fff;
    padding: 29px;
    padding-top: 90px;
    @include small();
    @include trans(0.2s, (cubic-bezier(.55,0,.1,1)));
    transform: translate3d(0 ,60px ,0);
    @media(max-width: 600px){
      width: 90%;
      height: 60%;
      left: 0px;
      overflow-y: scroll;
    }
  }
  .exit{
    position: absolute;
    top: -46px;
    right: 44px;
    color: #fff;
    cursor: pointer;
    @include small();
    font-weight: 900;
    padding: 6px;
    z-index: 100 !important;
    letter-spacing: 1px;
    @media(max-width: 600px){
      right: 90px;
    }
    @media(max-width: 400px){
      right: 40px;
      font-size: 10px;
      top: -60px;
    }
    &::after{
      position: absolute;
      bottom: -4px;
      left: -4px;
      background: #000;
      content: "";
      height: 100px;
      width: 58px;
      @include trans(0.3s, (cubic-bezier(.55,0,.1,1)));
      z-index: -1;
    }
    &:hover{
      color: #000;
    }

    &:hover::after{
      height: 2px;
    }
  }
}
#modern-dark-anime{
  top: 60%;
  left: 50%;
  transform: translate3d(-50% ,-50% ,0);
  position: fixed;
  z-index: 100000000;
  width: 40%;
  height: auto;
  display: none;
  opacity: 0.0;
  @include trans(0.5s, (cubic-bezier(.55,0,.1,1)));
  h1{
    color: #fff;
    position: absolute;
    top: -60px;
    left: -80px;
    transform: translate3d(0 ,60px ,0);
    font-size: 42px;
    letter-spacing: -1px;
    @include big();
    font-weight: 900;
    z-index: 20;
    @include trans(0.6s, (cubic-bezier(.55,0,.1,1)));
  }
  p{
    position: absolute;
    left: 80px;
    top: -90px;
    background: #000;
    color: #fff;
    padding: 29px;
    padding-top: 90px;
    @include small();
    @include trans(0.2s, (cubic-bezier(.55,0,.1,1)));
    transform: translate3d(0 ,60px ,0);
  }
  .exit{
    position: absolute;
    top: -46px;
    right: 44px;
    color: #000;
    cursor: pointer;
    @include small();
    font-weight: 900;
    padding: 6px;
    z-index: 100 !important;
    letter-spacing: 1px;
    &::after{
      position: absolute;
      bottom: -4px;
      left: -4px;
      background: #ccc;
      content: "";
      height: 100px;
      width: 58px;
      @include trans(0.3s, (cubic-bezier(.55,0,.1,1)));
      z-index: -1;
      @media(max-width: 600px){
        width: 40px;
      }
    }
    &:hover{
      color: #fff;
    }

    &:hover::after{
      height: 2px;
    }
  }
}
#modern-dark{
  top: 40% !important;
  position: fixed;
  @include center();
  z-index: 100000000;
  width: 40%;
  height: auto;
  display: none;
  h1{
    color: #fff;
    position: absolute;
    top: -60px;
    left: -80px;
    font-size: 42px;
    letter-spacing: -1px;
    @include big();
    font-weight: 900;
    z-index: 20;
  }
  p{
    position: absolute;
    left: 80px;
    top: -90px;
    background: #000;
    color: #fff;
    padding: 29px;
    padding-top: 90px;
    @include small();
  }
  .exit{
    position: absolute;
    top: -46px;
    right: 44px;
    color: #000;
    cursor: pointer;
    @include small();
    font-weight: 900;
    padding: 6px;
    z-index: 100 !important;
    letter-spacing: 1px;
    &::after{
      position: absolute;
      bottom: -4px;
      left: -4px;
      background: #ccc;
      content: "";
      height: 100px;
      width: 58px;
      @include trans(0.3s, (cubic-bezier(.55,0,.1,1)));
      z-index: -1;
    }
    &:hover{
      color: #fff;
    }
    &:hover::after{
      height: 2px;
    }
  }
}
.shade-light{
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: rgba(225,225,225,0.7);
  display: none;
}