/*------------------------------------------------------------------
[Table of contents]

1. Page styles
2. Media queries
-------------------------------------------------------------------*/


/*----------------------------------------------------------------------------------
1. Page styles
-----------------------------------------------------------------------------------*/

.page_404 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    animation: flicker 1.8s;
  -webkit-animation: flicker 1.8s;
    
    .wrap {
        height: 100%;
    }
    
    .wrap_float {
        height: 100%;
        display: flex;
        align-items: center;
    }
    
    .top {
        position: relative;
        padding: 100px 0;
    }
    
    .logo {
        width: 138px;
        height: 48px;
        background: url(../img/logo.svg) center center no-repeat;
        background-size: contain;
        display: block;
        position: absolute;
        left: 50%;
        top: 30px;
        margin-left: -69px;
        opacity: .6;
        z-index: 4;
        
        &:hover {
            opacity: 1;
        }
    }
    
    .error {
        font-size: 203px;
        color: #fff;
        font-family: "Prata", serif;
        text-align: center;
        line-height: 1;
    }
    
    .error_text {
        font-size: 48px;
        color: #fff;
        text-align: center;
        font-family: "Prata", serif;
    }
    
    .buttons {
        text-align: center;
        position: absolute;
        bottom: 50px;
        z-index: 2;
        left: 0;
        
        .btn {
            background: #D03000;
            height: 58px;
            line-height: 58px;
            text-align: center;
            padding: 0 22px;
            border-radius: 6px;
            display: inline-block;
            float: none;
            margin: 0 15px;
            width: auto;
            color: #fff;
            font-size: 18px;
            min-width: 200px;
            opacity: .3;
            transition: all .2s linear;
            
            &:hover {
                opacity: 1;
                transition: all .2s linear;
            }
        }
    }
    
    .room {
      top: 0px;
      left: 0px;
      height: 100%;
      width: 100%;
      position: absolute;
      //background: rgba(211, 31, 31, 0.3);
      //cursor:none;
        z-index: 2;
    }

    .cover {
      background: rgba(0, 0, 0, 0.85);
      height: 100%;
      width: 100%;
      left: 0px;
      top: 0px;
      position: absolute;
    //  pointer-events: none;
      animation: flicker 1.8s;
      -webkit-animation: flicker 1.8s;
        z-index: 2;
    }
}

@keyframes flicker{
  0%{
    background: rgba(0, 0, 0, 0.85);
    opacity:1;
  }
  5%{
    background: rgba(0, 0, 0, 0.65);
  }
  10%{
    background: rgba(0, 0, 0, 0.85);
  }
  15%{
    background: rgba(0, 0, 0, 0.65);
  }
  20%{
    background: rgba(0, 0, 0, 0.85);
  }
  40%{
    background: rgba(0, 0, 0, 0.85);
  }
  45%{
    background: rgba(0, 0, 0, 0.65);
  }
  50%{
    background: rgba(0, 0, 0, 0.85);
  }
  65%{
    background: rgba(0, 0, 0, 0.85);
  }
  70%{
    background: rgba(0, 0, 0, 0.65);
  }
  75%{
    background: rgba(0, 0, 0, 0.85);
  }
  80%{
    background: rgba(0, 0, 0, 0.65);
  }
  95%{
    background: rgba(0, 0, 0, 0.65);
  }
  100%{
    background: rgba(0, 0, 0, 0.85);
    opacity:1;
  }
}
@keyframes flicker{
  0%{
    background: rgba(0, 0, 0, 0.85);
    opacity:1;
  }
  5%{
    background: rgba(0, 0, 0, 0.65);
  }
  10%{
    background: rgba(0, 0, 0, 0.85);
  }
  15%{
    background: rgba(0, 0, 0, 0.65);
  }
  20%{
    background: rgba(0, 0, 0, 0.85);
  }
  40%{
    background: rgba(0, 0, 0, 0.85);
  }
  45%{
    background: rgba(0, 0, 0, 0.65);
  }
  50%{
    background: rgba(0, 0, 0, 0.85);
  }
  65%{
    background: rgba(0, 0, 0, 0.85);
  }
  70%{
    background: rgba(0, 0, 0, 0.65);
  }
  75%{
    background: rgba(0, 0, 0, 0.85);
  }
  80%{
    background: rgba(0, 0, 0, 0.65);
  }
  95%{
    background: rgba(0, 0, 0, 0.65);
  }
  100%{
    background: rgba(0, 0, 0, 0.85);
    opacity:1;
  }
}


/*----------------------------------------------------------------------------------
2. Media queries
-----------------------------------------------------------------------------------*/

@media screen and (max-height: 640px) {
    .page_404 {
        //height: 640px;
    }
    
    .page_404 .wrap_float {
        //align-items: flex-start;
        //padding-top: 120px;
    }
}

@media screen and (max-height: 360px) {
    .page_404 {
        height: auto;
        position: relative;
        padding-bottom: 60px;
    }
    
    .page_404 .wrap_float {
        align-items: flex-start;
        padding-top: 120px;
    }
}

@media screen and (max-width: 1040px) {
    .page_404 .cover,
    .page_404 .room {
        display: none;
    }
    
    .page_404 .error {
        font-size: 140px;
    }
    
    .page_404 .error_text {
        font-size: 34px;
    }
    
    .page_404 .top {
        padding: 0;
    }
    
    .page_404 .buttons {
        position: static;
        margin-top: 30px;
        
        .btn {
            opacity: 1;
        }
    }
    
    .page_404 .logo {
        opacity: 1;
    }
}

@media screen and (max-width: 640px) {
    .page_404 .error {
        font-size: 93px;
    }
    
    .page_404 .error_text {
        font-size: 24px;
    }
    
    .page_404 .buttons .btn {
        width: 49%;
        margin-right: 2%;
        min-width: inherit;
        display: block;
        float: left;
        margin-left: 0;
        padding: 0 6px;
        font-size: 16px;
        height: 48px;
        line-height: 48px;
        
        &:last-child {
            margin-right: 0;
        }
    }
    
    .page_404 .logo {
        width: 120px;
        margin-left: -60px;
        top: 20px;
    }
}
