*{margin:0;padding:0}

html{
    min-height:100vh;
    height:auto;
    width:100%
}

body{
    background:url(../img/background.jpg);
    background-color:#0e0e0e;
    background-size:cover;
    background-repeat:no-repeat;
    font-family:din;
    min-height:100vh;
    height:100%;
    position:relative
}

.container{
    background:url(../img/gmain.png);
    background-size:40vh;
    background-position-x:60vw;
    background-position-y:100%;
    background-repeat:no-repeat;
    min-height:100vh;height:100%
}

.container_c{
    width:100vw;
    background:linear-gradient(0deg,rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%);
    min-height:100vh;
    height:100%
}

.main{
    width:950px;
    min-height:100vh;
    height:100%;
    max-height:1024px;
    margin:0 auto
}

ul,li{
    display:flex
}

.nav{
    width:100%;
    height:45px;
    padding-top:100px;
    font-size:14px;
    display:flex
}

.nav img{
    max-width:104px;
    display:flex
}

.menu{
    width:100%;
    display:flex;
    justify-content:center
}

.active{
    background:#f2f2f2;
    width:100%;
    height:100px;
    box-shadow:0 0 15px 5px rgba(255,255,255,.25)
}

.active a{
    color:#0e0e0e!important
}

.menu__item{
    width:105px;
    height:42px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-right:40px;
    border:1px solid #f2f2f200;
    border-radius:5px
}

.menu__item:last-child{
    margin-right:0
}

.menu__item a{
    color:#f2f2f2;
    text-decoration:none
}

.menu__item:hover{
    border:1px solid #f2f2f2;
    transition:.2s
}

.main__text{
    margin-top:55px;
    font-size:34px;
    color:#fff
}

.main__text span{
    background:linear-gradient(180deg,rgb(235, 0, 0) 0%,red 100%);
    -webkit-background-clip:text;
    color:transparent
}

.minor__text{
    font-size:14px;
    color:rgba(255,255,255,.5);
    margin-top:45px
}

.button_block{
    height:85px;
    width:100%;
    display:flex;
    margin-top:40px
}

.button__play,.button__voice{
    display:flex
}

.button__play{
    width:210px;
    height:83px;
    border-radius:10px;
    overflow:hidden;
    background:linear-gradient(180deg,rgb(219, 0, 0) 0%,rgb(219, 0, 0) 100%)
}

.button__play:hover{
    background:rgba(242,242,242,.25)
}

.button__voice{
    margin-left:20px;
    width:360px;
    height:83px;
    border:0;
    border-radius:10px;
    overflow:hidden;
    background:linear-gradient(180deg,rgba(242,153,74,1) 0%,rgba(242,201,76,1) 100%)
}

.button__voice:hover{
    background:rgba(242,242,242,.25)
}

.play__bg{
    background:url(../img/rocket.png)
}

.voice__bg{
    background:url(../img/smile.png)
}

.play__bg,.voice__bg{
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    display:flex;
    background-position:left;
    align-items:center;
    justify-content:center
}

.play__bg a,.voice__bg a{
    font-size:34px;
    color:#fff;
    text-decoration:none
}

.monitoring{
    width:100%;
    display:flex;
    margin-top:40px;
    flex-wrap:wrap
}

.container__card{
    width:178px;
    height:210px;
    margin:auto;
    position:relative
}

.container__card:first-child{
    margin-left:0
}

.monitoring__card{
    width:178px;
    height:210px;
    border:1px solid transparent;
    position:relative;
    overflow:hidden;
    border-radius:10px;
    background:linear-gradient(40deg,rgba(23,23,23,1) 0%,rgba(37,37,37,1) 100%)
}

.status{
    position:absolute;
    font-size:11px;
    content:' ';
    display:none;
    height:18px;
    margin-top:-9px;
    left:50%;
    border-radius:5px;
    z-index:10;
    justify-content:center
}

.indicator{
    height:10px;
    width:10px;
    border:0;
    border-radius:50%;
    background:#4f4f4f;
    margin:18px
}

.information{
    text-align:center;
    width:100%
}

.information h2{
    font-size:18px;
    color:#fff
}

.information h1{
    color:#4f4f4f;
    font-size:36px
}

.information p{
    margin-top:5px;
    color:#fff;
    font-size:14px
}

.line{
    width:130px;
    height:5px;
    border:0;
    border-radius:100px;
    background:rgba(196,196,196,.1);
    margin:50px auto 0;
    overflow:hidden
}

.progress{
    height:100%;
    border:0;
    border-radius:100px;
    width:0;
    display:none
}

.monitoring__card img{
    position:absolute;
    top:10%;
    right:0;
    opacity:.25;
    overflow:hidden
}

@media only screen and (max-width:940px){
    
    .main{
        width:100%
    }
    
    .monitoring{
        margin-top:0
    }

    .container__card{
        margin:auto;
        margin-top:40px;
        width:190px
    }

    .container__card:first-child{
        margin:auto;
        margin-top:40px
    }

}

@media only screen and (max-width:850px){
    .container{
        background:0
    }
    
    .container_c{
        background:0!important
    }
    
    .main{
        width:calc(100% - 40px)
    }
    
    .nav{
        padding-top:20px;
        height:auto;
        flex-direction:column;
        justify-content:center
    }
    
    .nav img{
        margin:auto
    }
    
    .menu{
        width:auto;
        justify-content:center;
        margin-top:20px}
    }
    
@media only screen and (max-width:685px){
    body{
        background-size:cover
    }
    
    ul,li{
        flex-direction:column
    }
    
    .menu__item{
        margin-right:0;
        margin-top:5px
    }
}

@media only screen and (max-width:640px){
    .button_block{
        flex-direction:column;
        height:auto
    }
    
    .button__voice{
        margin-left:0;
        margin-top:20px
    }
    
    body{
        background-size:auto 1620px
    }
}

@media only screen and (max-width:420px){
    body{
        background:url(../img/backgroundm.png);
        background-size:auto 2220px;
        background-color:#1b1c14
    }
}

@media only screen and (max-width:385px){
    .play__bg a,.voice__bg a{
        font-size:27px
    }
    
    .button__play{
        width:168px;
        height:66px
    }
    
    .button__voice{
        width:288px;
        height:66px
    }
    
    .play__bg,.voice__bg{
        background-size:auto 100%
    }
}